<script setup lang="ts">
import type { StudentWordItem } from '@/api/types/student'
import CuttingWordCard from '@/components/WordCard/CuttingWordCard.vue'
import { ref } from 'vue'

const props = defineProps<{
  words: StudentWordItem[]
}>()

const emit = defineEmits<{
  (e: 'clickCard', item: StudentWordItem): void
  (e: 'onComplete'): void
  (e: 'activate', wordId: string | number): void
}>()

const newWords = ref([...props.words])
const currentWord = ref<StudentWordItem | null>(null)

const yesList = ref<StudentWordItem[]>([])
const noList = ref<StudentWordItem[]>([])

const isProcessing = ref(false)

function handleYesClick(item: StudentWordItem) {
  if (isProcessing.value) {
    return
  }

  isProcessing.value = true
  yesList.value.push(item)
  newWords.value = newWords.value.filter(i => i.wordId !== item.wordId)

  setTimeout(() => {
    isProcessing.value = false
  }, 400)

  if (newWords.value.length === 0 && noList.value.length === 0) {
    emit('onComplete')
  }
}

function handleNoClick(item: StudentWordItem) {
  if (isProcessing.value)
    return

  isProcessing.value = true
  noList.value.push(item)
  newWords.value = newWords.value.filter(i => i.wordId !== item.wordId)

  if (currentWord.value?.wordId === item.wordId) {
    currentWord.value = null
  }

  setTimeout(() => {
    isProcessing.value = false
  }, 300)
}

function handleClickCard(item: StudentWordItem) {
  currentWord.value = item
  emit('clickCard', { ...item })
  emit('activate', item.wordId)
}

function handleNoWordsClick() {
  if (noList.value.length === 0) {
    return
  }
  const item = noList.value.shift() as StudentWordItem
  newWords.value.push(item)
}
</script>

<template>
  <view class="word-list">
    <transition-group name="fade" tag="view">
      <view
        v-for="word in newWords"
        :key="word.wordId"
        class="word-card-wrap"
      >
        <CuttingWordCard
          :word="word"
          :is-active="currentWord?.wordId === word.wordId"
          @tap="handleClickCard(word)"
        />
        <div class="word-select">
          <view class="word-action word-yes" @click="handleYesClick(word)">
            <image v-show="!yesList.includes(word)" src="@/static/images/wordStudy/yes@2x.png" />
            <image v-show="yesList.includes(word)" src="@/static/images/wordStudy/yes-act@2x.png" />
          </view>
          <view class="word-action word-no" @click="handleNoClick(word)">
            <image v-show="!noList.includes(word)" src="@/static/images/wordStudy/close@2x.png" />
            <image v-show="noList.includes(word)" src="@/static/images/wordStudy/close-act@2x.png" />
          </view>
        </div>
      </view>
    </transition-group>

    <!-- 草稿箱 -->
    <view class="draft-box">
      <view class="draft-item-content">
        <text class="count">
          {{ yesList.length }}
        </text>
        <image src="@/static/images/wordStudy/YES信箱@2x.png" />
      </view>
      <view class="draft-item-content" @click="handleNoWordsClick">
        <text class="count">
          {{ noList.length }}
        </text>
        <image src="@/static/images/wordStudy/NO@2x.png" />
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import '@/scss/wordCuttingCommon.scss';

.word-select {
  display: flex;
  gap: 20rpx;
  margin-left: 20rpx;
}
</style>
